<template>
  <div>
  <f7-block class="comment_box" :class="{heigh2:isFold}" v-if="commentData.length" >
    <f7-accordion-item v-for="(item, index) in commentData" :key="index">
      <f7-accordion-toggle>
        <div class="comment_title_box" @click.stop="handleCommentClick()">
          <div class="top_box">
            <div class="top_left_box">
              <div class="avatar_box">
                <img
                  :src="item.headerImgUrl?item.headerImgUrl:'/static/user_header.jpg'"
                />
              </div>
              <div class="text_box">
                <div class="comment_name spanColor">
                  {{item.userName }}
                </div>
                <div class="comment_time spanSubColor">
                  {{item.createTime}}
                </div>
              </div>
            </div>
            <div class="top_right_box" @click.stop="handleZan(item,1)">
              <span class="spanColor">{{item.clickCount?item.clickCount:''}}</span>
              <svg-icon iconClass="zan_white" v-if="!item.isCurrUserClick" />
              <svg-icon iconClass="zan_red" v-else/>
            </div>
          </div>
          <div
            style="border-bottom:.5px solid #f0f0f0;margin-left:0.5rem;padding-bottom:0.1rem"
          >
            <div class="title_middle_box spanColor">
              {{item.comment}}
            </div>
            <div class="bottom_box spanLinkColor">{{item.responseArr.length}}条回复></div>
          </div>
        </div>
      </f7-accordion-toggle>
      <!-- <f7-accordion-content v-if="item.responseArr.length">
        <div class="reply_box" v-for="(resItem,resIndex) in item.responseArr" :key="resIndex">
          <div class="top_box">
            <div class="top_left_box">
              <div class="avatar_box">
                <img
                  :src="resItem.headerImgUrl?resItem.headerImgUrl:'/static/user_header.jpg'"
                />
              </div>
              <div class="text_box">
                <div class="comment_name spanColor">
                  {{resItem.userName}}
                </div>
                <div class="comment_time spanSubColor">
                  {{resItem.createTime}}
                </div>
              </div>
            </div>
            <div class="top_right_box" @click.stop="handleZan(resItem,1)">
              <span class="spanColor">{{resItem.clickCount?resItem.clickCount:0}}</span>
              <svg-icon iconClass="zan_white" v-if="!resItem.isCurrUserClick" />
              <svg-icon iconClass="zan_red" v-else/>
            </div>
          </div>
          <div
            style="margin-left:0.5rem;padding-bottom:0.1rem"
          >
            <div class="title_middle_box spanColor">
              @{{resItem.parentName}}:{{resItem.comment}}
            </div>
            
          </div>
        </div>
      </f7-accordion-content> -->
    </f7-accordion-item>
    
  </f7-block>
  <div class="no-comment spanLinkColor" v-if="!commentData.length" @click="handleCommentClick()">
      +暂无评论，点击添加评论
    </div>
  <!-- <div class="fold_box">
    <f7-button @click="handleFold()">
      展开|收起
    </f7-button>
  </div> -->
  </div>
</template>
<script>
import { getHotComment,addClickCount, delClickCount } from '@/api/share.js'
import commentUtil from '@/utils/comment.js'
import {mapGetters} from 'vuex'
import {debounce} from '@/utils/index.js'
export default {
  data(){
    return {
      isFold:false,
      commentData:[],
    }
  },
  props: {
    commentType: {
      type: String,
      default: '',
    },
    shareId: {
      type: Number,
    },
  },
  computed:{
    ...mapGetters({
      getUserInfo:'getUserInfo',
    })
  },
  watch:{
    commentType:{
      handler(val){
        console.log(val,'shortComment..');

      },
      immediate:true
    }
  },
  methods:{
    init(){
      this.commentData = [];
      this.getData();
    },
    handleFold(){
      this.isFold = !this.isFold;
    },
    handleZan:debounce(function(item,val){
      let queryData;
      if (this.commentType==='song'){
        queryData={
          id:item.id,
          sharedSongId:this.shareId,
          userId:this.getUserInfo.userid,
        }
      }
      else {
        queryData={
          id:item.id,
          sharedSongListId:this.shareId,
          userId:this.getUserInfo.userid,
        }
      }
      let curUserZan = false
      this.commentData.forEach((cItem) => {
        if (cItem.id === queryData.id) {
          curUserZan = cItem.isCurrUserClick
        }
        if (cItem.responseArr && cItem.responseArr.length) {
          cItem.responseArr.forEach((rItem) => {
            if (rItem.id === queryData.id) {
              curUserZan = rItem.isCurrUserClick
            }
          })
        }
      })
      if (curUserZan) {
        delClickCount(queryData)
          .then((res) => {
            if (res.code === 200) {
              console.log(this.commentData)
              this.commentData.forEach((cItem) => {
                if (cItem.id === queryData.id) {
                  if (val === 1) {
                    cItem.isCurrUserClick = false
                    cItem.clickCount--
                  }
                }
                if (cItem.responseArr && cItem.responseArr.length) {
                  cItem.responseArr.forEach((rItem) => {
                    if (rItem.id === queryData.id) {
                      if (val === 1) {
                        rItem.isCurrUserClick = false
                        rItem.clickCount--
                      }
                    }
                  })
                }
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      } else {
      addClickCount(queryData).then(res=>{
        if (res.code === 200){
          this.commentData.forEach(cItem=>{
            if(cItem.id === queryData.id){
              if (val === 1){
                cItem.isCurrUserClick = true;
                cItem.clickCount++;
              }
            }
            if (cItem.responseArr && cItem.responseArr.length){
              cItem.responseArr.forEach(rItem=>{
                if (rItem.id === queryData){
                  if (val === 1){
                    rItem.isCurrUserClick = true;
                    rItem.clickCount++;
                  }
                }
              })
            }
          })
        }
      }).catch(e=>{
        console.log(e)
      })
      }
    },500),
    handleCommentClick(){
      let self = this;
      console.log('shared_block comment clicked ....',this.commentType)
      this.$f7router.navigate('/commentPage/', {
        props: {
          shareType: this.commentType,
          shareId: this.shareId,
        },
      })
    },
    async getData() {
      let queryData = {}
      if (this.commentType === 'song') {
        queryData = {
          sharedSongId: this.shareId,
        }
      } else {
        queryData = {
          sharedSongListId: this.shareId,
        }
      }
      let res = await getHotComment(queryData)
      if (res.code === 200) {
        this.commentData = commentUtil.transToArr(res.data)
        console.log(this.commentData)
      } else {
        console.log('获取评论失败')
      }
    },
  },
  mounted() {
    this.getData()
  },
  
}
</script>
<style lang="scss" scoped>
.comment_box {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.comment_title_box,.reply_box {
  width: 100%;
  margin: 0.1rem 0 0.1rem 0;
  .top_box {
    display: flex;
    width: 100%;
    height: 0.5rem;
    align-items: center;
    justify-content: space-between;
    .top_left_box {
      display: flex;
      align-items: center;
      .avatar_box {
        img {
          width: 0.4rem;
          border-radius: 50%;
        }
      }
      .text_box {
        margin-left: 0.1rem;
        .comment_name {
          font-size: 16px;
          vertical-align: center;
          height: 0.2rem;
          line-height: 0.2rem;
        }
        .comment_time {
          font-size: 12px;
          height: 0.2rem;
          line-height: 0.2rem;
        }
      }
    }
    .top_right_box {
      display: flex;
      text-align: center;
      span {
        font-size: 10px;
        height: 0.16rem;
        line-height: 0.16rem;
        margin-right:0.05rem;
        margin-top:0.04rem;
       
      }
      .svg-icon {
        height: 0.2rem;
      }
    }
  }
}
.reply_box {
  width: calc(100% - 0.5rem);
  margin: 0.1rem 0 0.1rem 0.5rem;
}
.heigh2{
  height:2rem;
}
.no-comment{
  text-align: center;
}
</style>
